<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      svg {
        outline: 1px solid red;
      }
    </style>
  </head>
  <body>
    <!-- <svg >
        <polygon points="100,10 40,180 190,60 10,60 160,180"
        style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;">
      </svg> -->

    <svg>
      <!-- <rect
        x="10"
        y="10"
        width="100"
        height="100"
        style="fill: rgba(94, 255, 0, 0.699); stroke-width: 5; stroke: blue"
      /> -->
      <rect x="10" y="10" width="100" height="100" stroke-width="5" />
    </svg>
    <style>
      rect {
        fill: orange;
        stroke: red;
        opacity: 0.3;
      }
    </style>

    <svg>
      <circle cx="100" cy="100" r="50">
        <animate
          attributeName="r"
          values="50;100;50"
          dur="3s"
          repeatCount="indefinite"
        />
      </circle>
    </svg>

    <svg>
      <ellipse
        cx="100"
        cy="100"
        rx="50"
        ry="20"
        fill="none"
        stroke="red"
      ></ellipse>
      <ellipse
        cx="100"
        cy="100"
        rx="80"
        ry="50"
        fill="none"
        stroke="green"
      ></ellipse>
    </svg>

    <svg>
      <line x1="0" y1="0" x2="100" y2="100" stroke="green"></line>
    </svg>

    <svg>
      <polygon
        points="150,0 0,150 300,150 250,50"
        stroke="green"
        fill="none"
        stroke-width="10"
      ></polygon>
    </svg>
    <svg>
      <polygon
        points="0,0 0,150 150,150 25,75 75,125"
        stroke="red"
        fill-rule="evenodd"
      ></polygon>
    </svg>

    <svg>
      <path d="M100,0 L0,150 H100 l50,-100" stroke="green" fill="none" />

      <!-- M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Bézier curve
T = smooth quadratic Bézier curveto
A = elliptical Arc
Z = closepath -->
    </svg>

    <svg>
      <path
        d="M100,0 L0,150 H100 l50,-100 l50,50 Z"
        stroke="green"
        fill="none"
      />
    </svg>

    <svg>
      <!-- <path
        d="M0,150 Q250,0 300,150"
        stroke="blue"
        stroke-width="5"
        fill="none"
      /> -->

      <path
        d="M0,150 q150,-150 300,0"
        stroke="blue"
        stroke-width="5"
        fill="none"
      >
        <animate
          attributeName="d"
          values="M0,150 q150,-250 300,0; M0,150 q150,-150 300,0; M0,150 q150,-200 300,0;M0,150 q150,-150 300,0;M0,150 q150,-180 300,0"
          dur="1s"
          repeatCount="1"
        />
      </path>
    </svg>

    <svg>
      <path d="M0,75 q150,0 300,0" stroke="blue" stroke-width="5" fill="none">
        <animate
          attributeName="d"
          values="M0,75 q150,-100 300,0; M0,75 q150,80 300,0; M0,75 q150,-60 300,0; M0,75 q150,40 300,0; M0,75 q150,-20 300,0; M0,75 q150,0 300,0"
          dur="1s"
          repeatCount="indefinite"
        />
      </path>
    </svg>

    <!-- <svg width="800" height="600" xmlns="http://www.w3.org/2000/svg">

      <g>
       <title>Layer 1</title>
       <path id="svg_1" d="m185.67205,305.20903l0,0c0,-114.04679 39.17509,-206.5 87.49999,-206.5l0,0c23.20643,0 45.46241,21.75618 61.87183,60.48244c16.40944,38.72628 25.62817,91.25034 25.62817,146.01757l0,0c0,114.04678 -39.17509,206.5 -87.49999,206.5l0,0c-48.3249,0 -87.49999,-92.45323 -87.49999,-206.5zm43.75,0l0,0c0,57.02338 19.58756,103.25 43.75,103.25c24.16246,0 43.75,-46.22662 43.75,-103.25c0,-57.02338 -19.58755,-103.25 -43.75,-103.25l0,0c-24.16244,0 -43.75,46.22663 -43.75,103.25z" stroke="#000" fill="#fff"/>
       <path id="svg_2" d="m479.44828,296.87379c0,-43.62998 0,-87.25996 0,-130.88994c8.91707,0 17.83415,0 26.75122,0c0,87.25996 0,174.51993 0,261.77988c-8.91707,0 -17.83414,0 -26.75122,0c0,-43.63 0,-87.25996 0,-130.88995l0,0.00001zm39.51883,0c0,-43.62998 0,-87.25996 0,-130.88994c6.52503,-2.17307 9.95223,1.62305 8.52668,8.80905c0.09636,39.99249 0.19271,79.98498 0.28907,119.97745c16.49761,-13.50003 22.74799,-36.87497 27.86035,-58.22961c2.93411,13.90686 7.60059,30.84288 20.9982,35.37506c12.76963,4.38995 24.07877,-9.37121 23.94563,-23.46958c2.23034,-18.01625 2.53896,-36.73343 -0.8826,-54.55098c-3.20338,-11.27255 -12.80445,-20.58174 -23.482,-19.83693c-8.78725,-4.63278 -18.64262,9.66229 -7.38086,14.89439c9.47092,11.52307 -1.53816,31.24956 -14.70518,26.63074c-12.76556,-3.13224 -16.16058,-22.40668 -8.77447,-33.30325c10.59515,-15.83371 30.1264,-17.83059 46.17862,-15.52596c20.88704,2.72131 36.77363,24.2787 39.02566,47.58576c2.87581,20.79886 -1.81163,44.29784 -17.0167,57.58802c-12.74885,12.29246 -31.48844,13.82742 -46.46896,6.31758c-3.64318,6.27698 -7.28638,12.55393 -10.92957,18.83088c3.57939,6.12427 7.15876,12.24856 10.73813,18.3728c18.1402,-9.31108 41.85139,-4.47044 53.84349,14.47328c16.89032,25.51552 13.59565,66.52655 -8.34348,86.88913c-13.77932,12.88558 -33.14675,12.92989 -49.5225,7.7788c-12.39287,-3.78719 -24.4837,-17.58691 -20.65106,-33.31452c1.93358,-13.7059 18.3938,-18.86228 26.41291,-8.66182c10.91917,11.29648 -4.90727,22.67322 -4.09613,33.56137c12.15003,10.54541 31.83003,0.61714 34.65833,-16.20299c4.49658,-18.46711 3.44053,-38.09749 1.2414,-56.87498c-1.17931,-12.6242 -10.76991,-25.35127 -22.65981,-21.83039c-12.50691,3.25226 -18.74939,18.16301 -20.89171,31.39981c-2.62632,9.69388 -3.4641,-9.26841 -5.51369,-12.37264c-4.26058,-15.55837 -11.69352,-30.83916 -23.13648,-40.64809c-1.17882,4.1953 -0.10666,9.42857 -0.48381,14.06612c-0.09134,38.01714 -0.18269,76.03424 -0.27401,114.05137c-6.52894,2.17434 -9.94892,-1.62454 -8.50546,-8.8091c0,-40.6936 0,-81.38723 0,-122.08084l-0.00001,0.00001z" stroke="#000" fill="#fff"/>
      </g>
     </svg> -->
  </body>
</html>
